<template>
  <el-menu
    router
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="1"
    text-color="#fff"
  >
    <el-sub-menu :index="item.path" v-for="item in routerList" :key="item.path">
      <template #title>
        <i style="font-size: 24px" :class="['iconfont', item.icon]"></i>
        <span style="margin-left: 15px; font-size: 16px">{{
          item.meta.title
        }}</span>
      </template>
      <el-menu-item :index="i.path" v-for="i in item.children" :key="i.path">{{
        i.meta.title
      }}</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { onMounted, reactive } from '@vue/runtime-core'
import { useRouter } from 'vue-router'

const router = useRouter()
let routerList = reactive([])

// 获取后台全部子路由
routerList = router.options.routes[0].children

</script>

<style lang="scss" scoped></style>
